<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">

    </div>
    <script>
     //Object.defineProperty =》代理数据
     //vue2=>data中的数据就是通过Object.defineProperty
     //但是这个Object.defineProperty只能代理对象中的一个数据=》proxy
     //就是 =》 Object.defineProperty 中get 获取到新的数据时候需要中间件

    let obj = {_name:'lisi'}
    
    // let arrs = Object.key( obj)

    // for(let i = 0;i<arrs.length;i++ ){
        
    // }
    Object.defineProperty(obj,"name",{
        get(){

            //return
            return this._name
        },
        set(newVal){
          console.log(newVal,'set');
          //设置新的值=》跟新视图
          this._name = newVal
        let app =  document.getElementById('app')
        app.innerHTML = newVal

        }
    }) //对对象obj 进行代理

    //设置数据
    obj.name = '张三'

      
    // 获取数据=》收集依赖=》使用vue的语法=》{{}}
    console.log(obj.name);

    //Object.defineProperty 缺点：

    //1 Object.defineProperty 对象中的一个属性进行代理，但是我们的data 属性有很多个
    // 那么vue 一上来就是遍历

    //2Object.defineProperty  不能处理数组


    //vue3  proxy =>
    </script>
</body>
</html>